<template>
    <el-container>
        <el-card shadow="never" style="width:100%;" body-style="padding:5px">
            <el-tabs tab-position="top">
                <el-tab-pane label="设备概况">
                    <main>
                        <div style="display: flex">
                            <div style="width: 50%">
                                <el-card shadow="never">
                                    <template #header>
                                        <div class="card-header">
                                            <span>设备资料</span>
                                        </div>
                                    </template>
                                    <el-descriptions border :column="3" size="small">
                                        <el-descriptions-item label="设备编号">{{detail.code}}</el-descriptions-item>
                                        <el-descriptions-item label="设备名称">{{detail.title}}</el-descriptions-item>
                                        <el-descriptions-item label="设备规格">{{detail.spec}}</el-descriptions-item>
                                        <el-descriptions-item label="设备类别">{{detail.class_title}}</el-descriptions-item>
                                        <el-descriptions-item label="设备位置">{{detail.position_title}}</el-descriptions-item>
                                        <el-descriptions-item label="设备状态">{{detail.state_title}}</el-descriptions-item>
                                        <el-descriptions-item label="资产类别">{{detail.asset_class_title}}</el-descriptions-item>
                                        <el-descriptions-item label="使用部门">{{detail.dep_title}}</el-descriptions-item>
                                        <el-descriptions-item label="报修单位">{{detail.maintenance_company}}</el-descriptions-item>
                                        <el-descriptions-item label="供应商">{{detail.apply_title}}</el-descriptions-item>
                                        <el-descriptions-item label="父设备">{{detail.p_title}}</el-descriptions-item>
                                        <el-descriptions-item label="备注">{{detail.remark}}</el-descriptions-item>
                                        <el-descriptions-item label="设备二维码">
                                            <img :src="detail.qrcode" style="width:100px;height:100px">
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </el-card>
                            </div>
                            <div style="width: 50%">
                                <el-card shadow="never">
                                    <template #header>
                                        <div class="card-header">
                                            <span>近七天利用率走势</span>
                                        </div>
                                    </template>
                                    <!-- <div style="display:flex;width:100%">
                                        <div style="width:25%">
                                            <scEcharts height="245px" :option="options"></scEcharts>
                                        </div>
                                        <div style="width:75%">
                                            <scEcharts height="245px" :option="option"></scEcharts>
                                        </div>
                                    </div> -->
                                    <div style="display:flex;width:100%">
                                        <div style="width:25%">
                                            <scEcharts height="245px" :option="options"></scEcharts>
                                        </div>
                                        <div style="width:75%">
                                            <scEcharts height="245px" :option="option"></scEcharts>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                        <div style="display: flex">
                            <div style="width: 50%">
                                <el-card shadow="never">
                                    <template #header>
                                        <div class="card-header">
                                            <span>信息追溯</span>
                                        </div>
                                    </template>
                                    <scTable ref="table" :apiObj="table" @selection-change="selectionChange" stripe remoteSort remoteFilter border height="320" :params="query">
                                        <el-table-column type="selection"  align="center" width="50"></el-table-column>
                                        <el-table-column label="监测时间" fixed prop="FDATE" align="center" width="150"></el-table-column>
                                        <el-table-column label="设备编码" fixed prop="code" align="center" width="150"></el-table-column>
                                        <el-table-column label="设备名称" fixed prop="title" align="center" width="150"></el-table-column>
                                        <el-table-column v-for="(item,index) in tableShow" :key="index" :label="item.line_title" :prop="item.field" align="center"></el-table-column>
                                    </scTable>
                                </el-card>
                            </div>
                            <div style="width: 50%">
                                <el-card shadow="never">
                                    <template #header>
                                        <div class="card-header">
                                            <span>异常报警</span>
                                        </div>
                                    </template>
                                    <scTable ref="table" :data="AlarmData" row-key="id" stripe border hideDo hidePagination height="320">
                                        <el-table-column type="selection"  align="center" width="50"></el-table-column>
                                        <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                                        <el-table-column label="报警单据编号" prop="FBILLLNO" align="center" width="100"></el-table-column>
                                        <el-table-column label="设备内码" prop="FEQUID" align="center" width="100"></el-table-column>
                                        <el-table-column label="设备名称" prop="FEQUNAME" align="center" width="100"></el-table-column>
                                        <el-table-column label="报警开始时间" prop="FBEGINDATE" align="center" width="100"></el-table-column>
                                        <el-table-column label="报警结束时间" prop="FENDDATE" align="center" width="100"></el-table-column>
                                        <el-table-column label="报警持续时间" prop="FLONGDURRATION" align="center" width="100"></el-table-column>
                                        <el-table-column label="单据状态" prop="FSTATUS" align="center" width="100">
                                            <template #default="{row}">
                                                <div v-if="row.FSTATUS==0">未处理</div>
                                                <div v-if="row.FSTATUS==2">已处理</div>
                                                <div v-if="row.FSTATUS==3">已报修</div>
                                                <div v-if="row.FSTATUS==1">误报</div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="报警触发类型" prop="FCOMBLIST" align="center" width="100"></el-table-column>
                                        <el-table-column label="触发器名称" prop="FALARMDES" align="center" width="100"></el-table-column>
                                        <el-table-column label="触发条件" prop="FALARMCONDITION" align="center" width="100"></el-table-column>
                                        <!-- <el-table-column label="操作" fixed="right" align="center" width="80">
                                            <template #default="scope">
                                                <el-button-group style="display:flex;flex-direction:column">
                                                    <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" :disabled="scope.row.FSTATUS>0">处理</el-button>
                                                    <el-button text type="primary" size="small" @click="table_repair(scope.row, scope.$index)" >报修</el-button>
                                                </el-button-group>
                                            </template>
                                        </el-table-column> -->
                                    </scTable>
                                </el-card>
                            </div>
                        </div>
                    </main>
                </el-tab-pane>
                <el-tab-pane label="视频监控"></el-tab-pane>
            </el-tabs>
        </el-card>
    </el-container>
    <handle v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></handle>
    <save v-if="dialog.rep" ref="repDialog" @success="handleSuccessss" @closed="dialog.rep = false" draggable></save>
</template>

<script>
import scEcharts from "@/components/scEcharts";
import scStatistic from "@/components/scStatistic";
import Handle from './handle.vue';
import Save from '@/views/device/weixiu/fault/save.vue';
    export default {
        components: {scEcharts, scStatistic,Handle, Save },
        data() {
            return {
                groupId:"0",
                option : {
                    label: {
                        show: true,
                        position: 'center',
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            data: [],
                            type: 'line',
                            areaStyle: {},
                            name: 'Fake Data',
                        }
                    ]
                },
                options : {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['60%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                position: 'center',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 20,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [{
                                value: "",
                                name: '设备利用率',
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{a|{b}}\n{br|}\n{c}%',
                                        rich: {
                                            a: {
                                                fontSize: 18,
                                                color: '#333',
                                                lineHeight: 20
                                            },
                                            hr: {
                                                borderColor: '#aaa',
                                                width: '100%',
                                                borderWidth: 0.7,
                                                height: 0,
                                            },
                                            c: {
                                                color: '#000',
                                                fontSize: 20,
                                                lineHeight: 30
                                            },
                                        }
                                    }
                                }
                            }
                        ]
                        }
                    ],
                },
                dialog: {
                    save: false,
                    rep: false,
                },
                data:[
                    {
                        id:0,task_code:12
                    }
                ],
                search:{},
                detail:{},//详情
                xunData:[],//巡检表
                AlarmData:[],//报警表
                rate:{},
                // table:[],
                table:this.$API.jiankong.getMonitor.listAll,
                tableShow:[],
                query:{
                    device_id:this.$route.query.id,
                },
            }
        },
        mounted () {
            this.getDetail()
            this.xunList()
            this.AlarmList()
            this.getRate()
            this.getImgAndTable()
        },
        methods: {
            // tab切换
            tabChange(e){
                this.groupId = e
            },
            // 处理
            table_show(row){
                this.dialog.save = true;
                this.$nextTick(() => {
                    this.$refs.saveDialog.open("edit").setData(row);
                });
            },
            // 报修
            table_repair(row){
                let obj = {
                    id:this.$route.query.id,
                    code:this.detail.code,
                    title:this.detail.title,
                    class_title:this.detail.class_title,
                    listId:row.id
                }
                this.dialog.rep = true;
                this.$nextTick(() => {
                    this.$refs.repDialog.open("add").setId(obj);
                });
            },
            // 获取详情
            async getDetail(){
                var res = await this.$API.device.deviceList.detail.post({id:this.$route.query.id});
                this.detail = res.data
            },
            // 信息追溯
            async xunList(){
                var res = await this.$API.device.InspectionProjectTask.lists.get({device_id:this.$route.query.id});
                this.xunData = res.data.rows
            },
            // 异常报警
            async AlarmList(){
                var res = await this.$API.jiankong.monitorMonitor.lists.get({device_id:this.$route.query.id});
                this.AlarmData = res.data.rows
            },
            handleSuccess(){
                this.AlarmList()
            },
            // 保修返回
            async handleSuccessss(data,mode,listId){
                console.log('data :>> ', data);
                console.log('mode :>> ', mode);
                var res = await this.$API.jiankong.monitorMonitor.update_status.post({FSTATUS:3,id:listId});
                console.log('res :>> ', res);
                this.AlarmList()
            },
            // 获取设备7日利用率
            async getRate(){
                let query = {
                    // month:this.search.time,
                    date: 7,
                    device_id:this.$route.query.id,
                    type:1
                }
                var res = await this.$API.jiankong.equTable.post(query);
                // this.rate = res.data
                // let a = []
                // res.data.table.map(item=>{
                //     a.push({
                //         value:item.value,
                //         field:item.field
                //     })
                // })
                // this.table = a.reverse()
                let lineName = []
                let lineNumber = []
                res.data.line.title.map(item=>{
                    lineName.push(item)
                })
                res.data.line.value.map(item=>{
                    lineNumber.push(item)
                })
                this.option.xAxis.data = lineName
                this.option.series[0].data = lineNumber
                this.options.series[0].data[0].value = res.data.circular
            },
            // 信息追溯
            async getImgAndTable(){
                let query = {
                    // month:this.search.time,
                    date: 7,
                    device_id:this.$route.query.id,
                    type:1
                }
                var res = await this.$API.jiankong.getMonitor.tableImg.get(query);
                this.tableShow = res.data.table
            },
        },
    }
</script>

<style lang="scss" scoped>
.display{
    display: flex;
    align-items: center;
    .title{
        width: 70px;
        text-align-last: justify;
        background: #f4faff;
        padding: 8px;
        margin: 5px 0;
    }
    .width{
        width: 80px;
    }
    .detail{
        margin-left: 10px;
        .img{
            width: 100px;
            height: 100px;
        }
    }
}
.left{
    display: flex;
    align-items: start;
    .tabbar{
        background: #f4f4f4;
        height: 80vh;
        margin-right: 20px;
        border-radius: 8px;
        .tabList{
            padding: 16px 34px;
            text-align: center;
            color: #000;
            border-radius: 4px;
            cursor: pointer;
        }
    }
}
.background{
    background: #01a066;
    color: #FFF !important;
}
</style>